import React,{useState} from "react";
import {Form, Col, DatePicker, Drawer, Input, Row,Space,Button,Select } from "antd";
import {PlusCircleOutlined} from '@ant-design/icons'

function AddFrom(props) {
    const { Option } = Select;
    const [visible, setVisible] = useState(false);
    const [form] = Form.useForm()

    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
    const onFinish = ()=> {
        const FromData = form.getFieldsValue()
        props.onFinish(FromData)
    }
    return (
    <>
    <Button type="primary" style={{marginBottom:15,marginRight:15}} onClick={showDrawer}><PlusCircleOutlined />添加学生</Button>
    <Drawer
        title="添加新学员"
        width={720}
        onClose={onClose}
        visible={visible}
        bodyStyle={{
          paddingBottom: 80,
        }}
        extra={
          <Space>
            <Button onClick={onClose}>取消</Button>
            <Button onClick={onFinish} type="primary">
              提交
            </Button>
          </Space>
        }
      >
        <Form form={form} layout="vertical" hideRequiredMark>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="username"
                label="姓名"
                rules={[
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ]}
              >
                <Input placeholder="请输入学生姓名" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="email"
                label="邮箱"
                rules={[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                  },
                ]}
              >
                <Input
                  style={{
                    width: '100%',
                  }}
                  addonAfter=".com"
                  placeholder="请输入邮箱地址"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="gender"
                label="性别"
                rules={[
                  {
                    required: true,
                    message: '请选择性别',
                  },
                ]}
              >
                <Select placeholder="请选择">
                  <Option value="男">男</Option>
                  <Option value="女">女</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="phone"
                label="电话号码"
                rules={[
                  {
                    required: true,
                    message: '请输入电话号码',
                  },
                ]}
              >
                <Input
                  style={{
                    width: '100%',
                  }}
                  placeholder="请输入电话号码"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="class_id"
                label="班级"
                rules={[
                  {
                    required: true,
                    message: '请选择班级',
                  },
                ]}
              >
                <Select placeholder="请选择班级">
                  <Option value="HTML5">HTML5</Option>
                  <Option value="Jave">Java</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="dateTime"
                label="授课周期"
                rules={[
                  {
                    required: true,
                    message: '选择授课时间',
                  },
                ]}
              >
                <DatePicker.RangePicker
                  style={{
                    width: '100%',
                  }}
                  getPopupContainer={(trigger) => trigger.parentElement}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="description"
                label="备注"
                rules={[
                  {
                    required: false,
                  },
                ]}
              >
                <Input.TextArea rows={4} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
    </Drawer>
    </>
    )
}

export default AddFrom